<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #image {
            width: 100%;
            height: 0;
            padding-top: 56.25%;
            background-size: cover;
            position: relative;
        }

        #previewBtn {
            position: absolute;
            left: 10px;
            bottom: 10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.8);
            background-image: url("");
            background-size: 20px;
            background-position: 11px 10px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div id="image" draggable="false">
    <a id="previewBtn" href="javascript:void(0)" onclick="play()"></a>
</div>
<script type="text/javascript" src="../../vendor/base64/base64.min.js"></script>
<script type="text/javascript">
    var params = JSON.parse(Base64.decode(window.location.hash.substring(1)));
    var editor = top.tinymce.activeEditor;
    var snapshot = '?x-oss-process=video/snapshot,t_1,f_jpg,w_0,h_0,m_fast';
    document.querySelector('#image').setAttribute('style', 'background-image:url(\'' + params.source + snapshot + '\')');

    function play() {
        editor.windowManager.open({
            title: 'Preview',
            width: 640,
            height: 360,
            html: '<video style="width: 640px;height: 360px" src="' + params.source + '" controlslist="nodownload" poster="' + params.source + snapshot + '" controls="controls">' +
            '您的浏览器不支持 video 标签' +
            '</video>',
            buttons: []
        });
    }
</script>
</body>
</html>